<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <ipt-com v-model='msg'></ipt-com> <!--展示子组件，在子组件的标签上，动态绑定msg-->
        <!-- v-model='msg'双向数据绑定这个msg,这个msg就是父组件中的msg -->
    </div>
</body>
<!-- 组件模板 -->
<template id="bor1">
    <fieldset>
        <legend>新创建的一个组件</legend>
        <input type="text" :value='value' @input='ipt'> 
    </fieldset>
</template>
<script>
    // 在组件上使用v-model的方式
    //1.必须在子组件中，默认接收一个叫做value（这个value是默认的）的props属性
    //2.必须通过$emit发射一个叫候input（这个input是默认的）的自定义
    Vue.component('ipt-com',{ //新建一个组件叫做ipt-com
        props: ['value'], //接收传递下来的value,value就是输入框中的内容,所以此时子组件输入框的内容就变成了父组件的msg
        methods: {
            ipt(e){//发送一个事件叫，input，并且传过去一个参数，即子组件输入框的内容,目的是将子组件输入框的内容换到父组件
                this.$emit('input',e.target.value)
            }
        },
        template:'#bor1' //绑定到id名为bor1中
    })
    const vm = new Vue({
        el:'#app',
        data:{
            msg:'这是挂载在app上的msg'
        }
    })
</script>
</html>